<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>需求管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/test/index/css/font.css">
    <link rel="stylesheet" href="/test/index/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/test/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/test/index/js/xadmin.js"></script>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" id="addDemandForm">
        <div class="layui-row" style="margin-top: 10px;">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属项目:</label>
                    <div class="layui-input-block">
                        <select name="project" id="select" lay-verify="required" lay-reqtext="请选择项目" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <option th:each="list:${listProject}" th:value="${list.project_name}"
                                    th:text="${list.project_name}" th:selected="${list.project_name == projectName }" ></option>
                        </select>
                    </div>
                </div>
            </div>
            <input type="text" name="demandId" style="display: none" class="layui-input" th:value="${demand.id}">
            <div style="display: none" th:text="${demand.id}" id="demandId" name="demandId"></div>
            <div style="display: none" th:text="${demand.demand_time}" id="demand_time"></div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">需求日期:</label>
                    <div class="layui-input-block">
                        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">版本号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="version" lay-verify="required" lay-reqtext="版本号是必填项"
                               placeholder="请输入版本号"
                               autocomplete="off" class="layui-input" th:value="${demand.version_id}">
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">状态:</label>
                    <div class="layui-input-block">
                        <select name="demandStatus" lay-verify="required" lay-reqtext="请选择状态">
                            <option value="" selected=""></option>
                            <option value="0" th:selected="${demand_status} == 0">未完成</option>
                            <option value="1" th:selected="${demand_status} == 1">已完成</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label" id="test1">需求概述:</label>
                    <div class="layui-input-block">
                        <textarea th:text="${demand.demand_info}" placeholder="请输入内容" name="context" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>请选择归属标签:</legend>
                </fieldset>
                <div id="test4" class="demo-transfer"></div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0px;margin-top: 20px">
                        <button class="layui-btn" lay-filter="demo1" lay-submit="" onclick="return validate();">
                            提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    // 阻止按钮默认事件
    function validate(e) {
        return false;
    }

    layui.use(['form', 'laydate', 'layer', 'util', 'transfer','jquery'], function () {
        var form = layui.form, layer = layui.layer,laydate = layui.laydate,transfer = layui.transfer
            ,util = layui.util, $ = layui.jquery;

        //渲染穿梭框
        let demandId = $("#demandId").text();
        $.get('/demand/getLabel?demandId='+demandId, function (result) {
            //显示搜索框
            transfer.render({
                elem: '#test4', //绑定元素
                title: ['未选择', '已选择'],
                showSearch: true,//开启搜索框
                data: result.data.labelList,
                id: 'transfer_data', //定义索引
                value:result.data.checkIds,
                parseData: function (res) {
                    return {
                        "value": res.id ////穿梭框的唯一标识
                        , "title": res.label_name //穿梭框的值
                        // , "checked": res.checked //是否选中
                    }
                },
            })
        })
        //固定块
        util.fixbar({
            css: {right: 50, bottom: 100}
            , bgcolor: '#393D49'
            , click: function (type) {
                console.log(type);
                if (type === 'top') {
                    layer.msg('返回顶部')
                }
            }
        })
        // 设置最大可选的日期
        function maxDate() {
            var now = new Date();
            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        }
        //获取时间值
        function getDefault(){
            return  $("#demand_time").text();

        }
        getDefault();
        //日期
        laydate.render({
            elem: '#date',
            max: maxDate(),
            theme: '#009688',
            value: getDefault()
        });

        //监听提交
        form.on('submit(demo1)', function (data, ) {
            // event.preventDefault()
            // debugger
            //获得右侧数据
            let getData = transfer.getData('transfer_data');
            let label_name = ''
            for (let checkData in getData) {
                label_name += "," + getData[checkData].title
            }
            let form_data = data.field;
            form_data.label_name = label_name.substr(1);
            let loading = layer.load();
            //发异步
            $.ajax({
                type: "POST",
                url: "editView",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(form_data),
                dataType: "json",
                async:false,
                success: function (result) {
                    layer.close(loading)
                    if (result.code == 200) {
                        layer.msg(result.message,{icon:1,time:2000},function(){
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("testReload");
                        });
                    } else {
                        layer.msg(result.message);
                    }
                },
                error: function (data) {
                    alert(data)
                }
            });

        })
    })
</script>
</body>
</html>